iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
自我挑戰組

小小前端轉職去系列 第 9

Html css-2 實作篇 -Brackets

  • 分享至 

  • xImage
  •  

昨天粗略的介紹一下css

我們就要來比較 這個仿照的bbc根本的差在哪裡

https://ithelp.ithome.com.tw/upload/images/20181009/20098345WjAkhzWz4w.png
第一 整個topbar的盒子應該在畫面的中間

所以我們用一個盒子fixedwidth幫我們填好的內容包起來做置中功能
架構上是 container >fixedwidth >topbar

https://ithelp.ithome.com.tw/upload/images/20181009/20098345mGZIUxRmWD.png

告訴CSS fixedwidth的內容
.意思是Class ,所以.fixedwidth就是找到 Class是fixedwidth的div所做的事

.fixedwidth {
	width: 1000px;
    height: 100%;
    margin: auto;
    background-color: aqua;
}

表示寬度是1000px,高度100%則是所有內容撐開的高度
margin成auto也就是除了寬度1000px左右平均分配
最後給他上個淺藍色可以知道當前做出來的範圍大小
https://ithelp.ithome.com.tw/upload/images/20181009/20098345h04G2OyEfW.png


上一篇
Html css 介紹篇 -Brackets
下一篇
Html css 3 實作篇 -Brackets
系列文
小小前端轉職去11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言